<template>
  <div v-if="dialogVisible" style="z-index: 999">
    <div class="el-dialog__wrapper">
      <div class="el-dialog" style="margin-top: 15vh; width: 30%;">
        <div class="el-dialog__header">
          <span class="el-dialog__title">{{title}}</span>
          <!-- <el-button icon="el-icon-close" circle @click="cancel" class="right-btn"></el-button> -->
        </div>
        <div class="el-dialog__body">
            <label for="">{{label}}</label>
            <el-input v-model="dValue" placeholder="请输入内容"></el-input>
        </div>
        <div class="el-dialog__footer">
          <span class="dialog-footer">
            <el-button type="primary" @click="cancel" plain>取消</el-button>
            <el-button type="primary" @click="confirm">确定</el-button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const queryString = require('querystring')
export default {
  name: 'addBook',
  props: ['title', 'dialogVisible', 'label', 'input', 'isEdit', 'params'],
  data() {
    return {
      dValue: ''
    };
  },
  created() {
    this.dValue = this.input
  },
  watch: {
    input() {
      this.dValue = this.input
    }
  },
  methods: {
    handleClose() {},
    cancel() {
      this.$emit('control', false)
    },
    getParams() {
      const params = {
        id: this.params.id, // int 新增时不传，修改时必传 主键ID
        groupId: this.params.groupId, // int 是 组的id
        parentKey: this.params.parentKey, // String 是 父group的key。如神经外科的该字段就是外科的dkey字段。如果没有父group，则为0
        // sortId: this.params.sortId, // int 否 将来显示select下拉框时的顺序，可以根据这个排序
        dKey: this.params.dKey || new Date().getTime(), // String 是 同一个group，key不能相同。给后台传也是传 该字段
        dValue: this.dValue // String 是 值，用来给select显示 dDescribe
      }
      if (!this.isEdit) delete params.id
      return params
    },
    confirm() {
      const params = this.getParams()
      let type = 'post'
      if (this.isEdit) type = 'put'
      this.axios[type]('/dict', queryString.stringify(params)).then((res) => {
        const code = Number(res.data.code)
        if (code === 200) {
          this.$message(this.mes.success)
          this.$emit('control', true)
        } else {
          this.$message(this.mes.busy)
          this.$emit('control', false)
        }
      }).catch((err) => {
        console.log(err)
        this.$message(this.mes.busy)
        this.$emit('control', false)
      })
    }
  }
};
</script>

<style lang="less" scoped>
.right-btn{
  position: relative;
  left: 262px;
  border: transparent;
}
.el-input{
  margin-top: 10px;
}
</style>
